<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">


</head>

<body>
    <!-- 头部 -->
    <div class="top">
        <div class="wrap">
            <div class="left">
                <h1 class="logo"><a href="https://music.163.com/">网易云音乐</a>
                    <div class="triangle"></div>
                </h1>
                <ul>
                    <li><span><a href="#">发现音乐</a></span></li>
                    <li><span><a href="#">我的音乐</a></span></li>
                    <li><span><a href="#">关注</a></span></li>
                    <li><span><a href="#">商城</a></span></li>
                    <li><span><a href="#">音乐人</a></span></li>
                    <li>
                        <span><a href="#">客户端</a>
                            <span class="hot"></span>
                        </span>
                    </li>
                </ul>
            </div>

            <div class="right">
                <span class="parent">
                    <span class="icon"></span>
                    <input type="text" placeholder="音乐/视频/电台/用户">
                </span>
                <a href="#" class="center">创作者中心</a>
                <a class="btn">登录</a>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="wrap">
            <ul class="list">
                <li class="item"><a href="#">推荐</a></li>
                <li class="item"><a href="#">排行榜</a></li>
                <li class="item"><a href="#">歌单</a></li>
                <li class="item"><a href="#">主要电台</a></li>
                <li class="item"><a href="#">歌手</a></li>
                <li class="item"><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="wrapper">
            <ul class="img-list">
                <li><a href="#"><img src="./img/banner.jpg" alt=""></a></li>
            </ul>
            <!-- 轮播图控制点 -->
            <ul class="dots">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="download">
                <a href="#">PC 安卓 iPhone WP iPad Mac 六大客户端</a>
            </div>
        </div>
        <div class="arrow left"></div>
        <div class="arrow right"></div>
    </div>
    <!-- 主体区 -->
    <div class="main">
        <div class="wrap">
            <div class="left"></div>
            <div class="right">
                <div class="user-login">
                    <div class="text">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</div>
                    <div class="login">用户登录</div>
                </div>
                <!-- 入驻歌手 -->
                <div class="settle-singer">
                    <div class="small-header">
                        <h3 class="title">入驻歌手</h3>
                        <a href="#" class="more">查看全部 &gt;</a>
                    </div>
                    <!-- 列表项 -->
                    <ul>
                        <li class="singer-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-01.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">张惠妹aMEI</div>
                                    <div class="descpt">台湾歌手张惠妹</div>
                                </div>
                            </a>
                        </li>
                        <li class="singer-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-02.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">吴莫愁Momo</div>
                                    <div class="descpt">
                                        《中国好声音》选手
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="singer-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-03.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">孙楠</div>
                                    <div class="descpt">歌手孙楠</div>
                                </div>
                            </a>
                        </li>
                        <li class="singer-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-04.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">麦田老狼</div>
                                    <div class="descpt">歌手,音乐人</div>
                                </div>
                            </a>
                        </li>
                        <li class="singer-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-05.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">陈楚生</div>
                                    <div class="descpt">唱作歌手</div>
                                </div>
                            </a>
                        </li>
                        <li class="singer-list">
                            <a href="#" class="apply">
                                <i>申请成为网易音乐人</i>
                                <span></span>
                            </a>
                        </li>
                    </ul>
                    <!-- 列表结束 -->
                    <!-- 按钮 -->

                    <div class="settle-anchor">
                        <div class="small-header">
                            <h3 class="title">热门主播</h3>
                        </div>
                         <!-- 列表项 -->
                    <ul>
                        <li class="anchor-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-01.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">张惠妹aMEI</div>
                                    <div class="descpt">台湾歌手张惠妹</div>
                                </div>
                            </a>
                        </li>
                        <li class="anchor-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-02.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">吴莫愁Momo</div>
                                    <div class="descpt">
                                        《中国好声音》选手
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="anchor-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-03.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">孙楠</div>
                                    <div class="descpt">歌手孙楠</div>
                                </div>
                            </a>
                        </li>
                        <li class="anchor-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-04.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">麦田老狼</div>
                                    <div class="descpt">歌手,音乐人</div>
                                </div>
                            </a>
                        </li>
                        <li class="anchor-list">
                            <a href="#" class="item">
                                <div class="album">
                                    <img src="img/singer-05.jpg" alt="">
                                </div>
                                <div class="info">
                                    <div class="singer">陈楚生</div>
                                    <div class="descpt">唱作歌手</div>
                                </div>
                            </a>
                        </li>
                        
                    </ul>
                    </div>
                </div>
            </div>
        </div>
</body>
<script>



</script>

</html>